<template>
	<div style="display: flex;flex-direction: column;" class="otherPage partyBuildingLeads partyBuildingInformation">
		<Header :selected="2"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''">

			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="1">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13">
						<div class="" style="margin-bottom: 10px;">
							<div class="swiper-container" ref="partyBuildingInformationSwiper"
								id="partyBuildingInformationSwiper">
								<div class="swiper-wrapper">
									<div @click="goToDetail(slide.id)" class="swiper-slide"
										v-for="(slide, index) in newsCarousel" :key="index">
										<div class="slide-content">
											<img :src="slide.fileUrl" alt="Slide" class="swiper-lazy animation"
												style="" />
										</div>
										<div class="slideTitle">{{slide.title}}</div>
										<div class="slideOpacityBg"></div>
									</div>
								</div>
								<div class="newsPation">
									<div class="swiperagination" ref="partyBuildingInformationSwiperPagination"
										id="partyBuildingInformationSwiperPagination">
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="newArea">
						<div class="news-list">
							<el-row @click="goToDetail(news.id)" :gutter="6" v-for="(news, index) in newsList"
								:key="index" class="news-item" :class="{ 'hover': hoverIndex === index }"
								@mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1"
								@click.native="goToDetail(news.id)">
								<el-col :span="5" class="date">
									<div>
										<div class="day">{{ formatDate(news.createTime, 'DD') }}</div>
										<div class="month-year">{{ formatDate(news.createTime, 'yyyy-MM') }}</div>
									</div>
								</el-col>
								<el-col :span="19" class="newcontent">
									<div class="newcontentcontainer">
										<div class="title">{{ news.title }}</div>
										<div class="description">
											{{news.content.setWrap()}}

										</div>

									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>


				<el-row :gutter="24" type="flex">
					<el-col :span="24" class="newMore">

						<el-button type="primary" @click="gotoNewList()">{{$t("more")}}<i
								class="el-icon-d-arrow-right"></i>
						</el-button>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import {
		partyBuildingLeads
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				baseUrl: this.$request.getImgUrl(),
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: partyBuildingLeads,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//党建引领
						label: this.$t('partyBuildingLeads'),
						to: '/partyBuildingLeads'
					},
					{
						//党建资讯
						label: this.$t('partyBuildingInformation'),
						to: '/partyBuildingInformation'
					}
				],
				newsCarousel: [],
				newsList: [],
				hoverIndex: -1
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.getPartyInfoTopImage();
			//获取banner

			//获取新闻列表
			this.getPartyInfoPage().then(data => {
				this.initBannerSwiper();

				this.loading = false;
			});
		},
		methods: {
			/**
			 * 获取banner图片
			 */
			getPartyInfoTopImage() {
				let params = {};
				let that = this;
				that.$request.getPartyInfoTopImage(params).then(res => {
					if (res && res.data) {
						that.bg_img = that.baseUrl + res.data.fileUrl;
						console.log(that.bg_img);
					}

				}).catch((error) => {
					console.log(error);
				});
			},
			/**
			 * 获取新闻列表
			 */
			getPartyInfoPage() {
				let params = {
					"pageNum": 1, //页码
					"pageSize": 4, //页大小（每页显示条数）
				};
				let that = this;

				return new Promise((resolve, reject) => {
					that.$request.getPartyInfoList(params).then(res => {
						if (res && res.data) {
							that.newsList = res.data.partyInfoList;
							that.newsCarousel = res.data.coverList;
							// that.newsList.forEach(function(item, index) {
							// 	that.newsCarousel.push({
							// 		imageUrl: that.baseUrl + item.fileUrl,
							// 		title: item.title
							// 	})
							// })

							resolve();
						}

					}).catch((error) => {
						console.log(error);
					});
				});
			},
			formatDate(date, format) {
				const dateObj = new Date(date);
				const year = dateObj.getFullYear();
				const month = String(dateObj.getMonth() + 1).padStart(2, '0');
				const day = String(dateObj.getDate()).padStart(2, '0');

				// 根据传入的格式进行处理
				if (format === 'yyyy-MM') {
					return `${year}-${month}`;
				} else if (format === 'DD') {
					return day;
				}
				return date;
			},

			initBannerSwiper() {
				let ss = this.$t('partyBuildingLeads')
				let that = this;
				that.swiper = new Swiper(that.$refs.partyBuildingInformationSwiper, {
					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},

					pagination: {
						el: that.$refs.partyBuildingInformationSwiperPagination,
						clickable: true,
						renderBullet: function(index, className) {
							return '<span style="width:10px; height:10px;margin:0 5px;background-color:#fff" class="' +
								className + '"> </span>';
						},
					},
					autoplay: {
						delay: 4000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},

				});
				that.swiper.on('slideNextTransitionStart', function() {
					var activeIndex = that.swiper.activeIndex;
					// console.log("开始切换" + activeIndex);
				});
			},
			gotoNewList() {
				this.$router.push({
					name: this.$t("partyBuildingInNewsList")
				});
			},
			//////跳转详情页面
			goToDetail(id) {
				this.$router.push({
					name: this.$t("partyBuildingInNewsDetail"),
					query: {
						id: id,
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/partyBuildingLeads/partyBuildingLeads.css");

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
	}

	.partyBuildingLeads .news-list .newcontent .title {
		padding: 0 10px;
	}

	.partyBuildingInformation .swiper-container {}

	.partyBuildingInformation .swiper-slide {
		height: 100%;
	}

	.partyBuildingInformation .slide-content {
		height: 100%;
	}

	.partyBuildingInformation .newArea {
		height: 100%;
	}

	.partyBuildingInformation .news-list .news-item {
		height: 112px;
		margin-bottom: 18px;
	}

	.partyBuildingInformation .news-item:hover {
		transform: scale(0.97)
	}

	.partyBuildingInformation .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #EB7F20;
		border-radius: 4px;
		text-align: center;
		color: #EB7F20;
		font-size: 0.8em;
	}

	.partyBuildingInformation .moreInfoBtn:hover {
		background-color: #EB7F20;
		color: #FFF;
	}

	.partyBuildingInformation .newcontent .newcontentcontainer {
		height: 100%;
		background-color: #F6F6F6;
		padding-top: 0.5vh;
	}

	.partyBuildingInformation .title {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #272727;
		font-size: 22px;

		height: 34px;
		line-height: 34px;
	}

	.partyBuildingInformation .slideTitle {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #FFF;
		font-size: 20px;
		width: 100%;
		padding: 0px 16% 0px 10px;
		height: 60px;
		line-height: 60px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 9999;
	}

	.partyBuildingInformation .slideOpacityBg {
		width: 100%;
		height: 60px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 99;
		background-color: black;
		opacity: 0.6;
	}

	.partyBuildingInformation .newcontent .description {
		padding: 0 10px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 1em;
		height: 54px;
		line-height: 27px;

		opacity: 0.7;
	}

	.partyBuildingInformation #partyBuildingInformationSwiperPagination {
		position: absolute;
		right: 0px;
		bottom: 20px;
	}

	.partyBuildingInformation .newsPation {
		height: 60px;
		width: 100%;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: 1;
		padding: 0px;
		opacity: 1;
	}

	.partyBuildingInformation .swiper-slide {
		cursor: pointer;
		position: relative;
	}

	.partyBuildingInformation .swiper-pagination-bullet {
		background-color: #FFF;
		opacity: 0.2;
	}

	.partyBuildingInformation .swiper-pagination-bullet-active {
		background-color: #FFF;
		opacity: 1;
	}

	.partyBuildingInformation .news-list .newcontent .title {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #000000;
		font-size: 24px;

	}

	.partyBuildingInformation .news-list .day {
		text-align: center;
		font-size: 40px;
		height: 62px;
		line-height: 62px;
		/* padding-top: 0vh */
	}

	.partyBuildingInformation .news-list .month-year {
		font-size: 1rem;
		height: 18px;
		line-height: 18px;
	}

	.partyBuildingInformation .news-list .date {
		text-align: center;
	}

	/* 定义变量 */
	:root {
		--widthPercent: 70%;
	}

	.content {
		background-color: #F6F6F6;

	}

	.partyBuildingLeads .content {
		padding: 0px;
	}

	.content_bg {
		background-color: #ffffff;
		margin: 0 auto;
		padding: 50px;
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);

		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((2560 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((2560 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((2560 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((2560 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}


		/* .swiper-container {
			width: calc(2560px / 1920 * 720);
			height: calc(2560px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(2560 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((2560 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(2560 / 1920 * 34));
			line-height: calc(1px*(2560 / 1920 * 34));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(2560 / 1920 * 54));
			line-height: calc(1px*(2560 / 1920 * 54 / 2))
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(2560 / 1920 * 62));
			line-height: calc(1px*(2560 / 1920 * 62));
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((2560 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((2560 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((2560 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((2560 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}


		/* .swiper-container {
			width: calc(2560px / 1920 * 720);
			height: calc(2560px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(2560 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((2560 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(2560 / 1920 * 54));
			line-height: calc(1px*(2560 / 1920 * 54 / 2))
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(2560 / 1920 * 34));
			line-height: calc(1px*(2560 / 1920 * 34));
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(2560 / 1920 * 62));
			line-height: calc(1px*(2560 / 1920 * 62));
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((2320 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((2320 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((2320 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((2320 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}

		/* .swiper-container {
			width: calc(2320px / 1920 * 720);
			height: calc(2320px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(2320 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((2320 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(2320 / 1920 * 54));
			line-height: calc(1px*(2320 / 1920 * 54 / 2))
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(2320 / 1920 * 34));
			line-height: calc(1px*(2320 / 1920 * 34));
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(2320 / 1920 * 62));
			line-height: calc(1px*(2320 / 1920 * 62));
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((2120 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((2120 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((2120 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((2120 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}

		/* .swiper-container {
			width: calc(2120px / 1920 * 720);
			height: calc(2120px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(2120 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((2120 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(2120 / 1920 * 34));
			line-height: calc(1px*(2120 / 1920 * 34));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(2120 / 1920 * 54));
			line-height: calc(1px*(2120 / 1920 * 54 / 2))
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(2120 / 1920 * 62));
			line-height: calc(1px*(2120 / 1920 * 62));
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1920 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((1920 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((1920 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((1920 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}

		/* .swiper-container {
			width: 720px;
			height: 520px;
		} */

		.partyBuildingInformation .news-list .news-item {
			height: calc(1px * (((1920 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: 34px;
			line-height: 34px;
		}

		.partyBuildingInformation .newcontent .description {
			height: 54px;
			line-height: 27px;
		}

		.partyBuildingInformation .news-list .day {
			height: 62px;
			line-height: 62px
		}

	}

	@media (max-width: 1720px) {
		.content_bg {
			width: calc(1720px * 0.8);

		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1720 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((1720 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((1720 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((1720 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}

		/* .swiper-container {
			width: calc(1720px / 1920 * 720);
			height: calc(1720px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(1720 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((1720 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(1720 / 1920 * 34));
			line-height: calc(1px*(1720 / 1920 * 34));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(1720 / 1920 * 54));
			line-height: calc(1px*(1720 / 1920 * 54 / 2))
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(1720 / 1920 * 62));
			line-height: calc(1px*(1720 / 1920 * 62));
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1520 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((1520 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((1520 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((1520 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}

		/* .swiper-container {
			width: calc(1520px / 1920 * 720);
			height: calc(1520px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(1520 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((1520 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(1520 / 1920 * 34));
			line-height: calc(1px*(1520 / 1920 * 34));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(1520 / 1920 * 54));
			line-height: calc(1px*(1520 / 1920 * 54 / 2))
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(1520 / 1920 * 62));
			line-height: calc(1px*(1520 / 1920 * 62));
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1366 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((1366 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((1366 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((1366 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}

		/* .swiper-container {
			width: calc(1366px / 1920 * 720);
			height: calc(1366px / 1920 * 520);
		} */

		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(1366 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((1366 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {
			font-size: 20px;
			height: calc(1px*(1366 / 1920 * 40));
			line-height: calc(1px*(1366 / 1920 * 40));
		}

		.partyBuildingInformation .newcontent .description {
			font-size: 14px;
			height: calc(1px*(1366 / 1920 * 60));
			line-height: calc(1px*(1366 / 1920 * 60 / 2))
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(1366 / 1920 * 62));
			line-height: calc(1px*(1366 / 1920 * 62));
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: calc(1120px * 0.8);
		}

		.el-col-md-13 {
			width: calc(100% * 13/24) !important;
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1120 * 0.8 - 140) * 13 / 24));
			height: calc(1px * ((1120 * 0.8 - 140) * 13 / 24 * 520 / 720));
		}

		.newArea,
		.news-list {
			width: calc(1px * ((1120 * 0.8 - 140) * 11 / 24));
			height: calc(1px * ((1120 * 0.8 - 140) * 13 / 24 * 520 / 720)) !important;
		}


		.partyBuildingInformation .news-list .news-item {
			/* height: calc(1px*(1120 / 1920 * 520 - 18*3)/4); */
			height: calc(1px * (((1120 * 0.8 - 140) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(1120 / 1920 * 54));
			line-height: calc(1px*(1120 / 1920 * 54 / 2));
			font-size: 0.6em;
		}

		.partyBuildingInformation .news-list .newcontent .title {
			font-size: 1em;
			height: calc(1px*(1120 / 1920 * 34));
			line-height: calc(1px*(1120 / 1920 * 34));
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(1120 / 1920 * 62));
			line-height: calc(1px*(1120 / 1920 * 62));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(30));
			line-height: calc(1px*(30 / 2));
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(22));
			line-height: calc(1px*(22));
			font-size: 22px;
		}

		.partyBuildingInformation .slideTitle {
			font-size: 12px;
			padding: 0px 20% 0px 10px;
		}
	}

	@media (max-width: 1024px) {
		.content_bg {
			width: calc(1024px * 0.8);
			margin: 0 auto;
			padding: 50px;
		}

		.el-col-md-13 {
			width: 100% !important;
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1024 * 0.8 - 40) * 13 / 24));
			height: calc(1px * ((1024 * 0.8 - 40) * 13 / 24 * 520 / 720));

		}

		.newArea,
		.news-list {
			width: 100%;
			height: calc(1px * ((1024 * 0.8 - 40) * 13 / 24 * 520 / 720)) !important;
			padding-left: 10px;
		}


		.partyBuildingInformation .news-list .news-item {
			width: 100%;
			height: calc(1px * (((1024 * 0.8 - 40) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(1024 / 1920 * 40));
			line-height: calc(1px*(1024 / 1920 * 40));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(30));
			line-height: calc(1px*(30 / 2));
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(22));
			line-height: calc(1px*(22));
			font-size: 22px;
		}

		.partyBuildingLeads .news-item .date {
			color: #ffffff;
			background-color: #0484D7;
		}

		.partyBuildingLeads .news-item .newcontent .title {
			color: #0484D7;
		}

		.partyBuildingInformation .slideTitle {
			font-size: 14px;
		}
	}

	@media (max-width: 900px) {
		.content_bg {
			width: calc(1024px * 0.8);
			margin: 0 auto;
			padding: 50px;
		}

		.el-col-md-13 {
			width: 100% !important;
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((1024 * 0.8 - 40) * 13 / 24));
			height: calc(1px * ((1024 * 0.8 - 40) * 13 / 24 * 520 / 720));

		}

		.newArea,
		.news-list {
			width: 100%;
			height: calc(1px * ((1024 * 0.8 - 40) * 13 / 24 * 520 / 720)) !important;
			padding-left: 10px;
		}

		.partyBuildingInformation .news-list .news-item {
			width: 100%;
			height: calc(1px * (((1024 * 0.8 - 40) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: calc(1px*(1024 / 1920 * 40));
			line-height: calc(1px*(1024 / 1920 * 40));
		}

		.partyBuildingInformation .newcontent .description {

			height: calc(1px*(30));
			line-height: calc(1px*(30 / 2));
		}

		.partyBuildingInformation .news-list .day {
			height: calc(1px*(22));
			line-height: calc(1px*(22));
			font-size: 22px;
		}

		.partyBuildingLeads .news-item .date {
			color: #ffffff;
			background-color: #0484D7;
		}

		.partyBuildingLeads .news-item .newcontent .title {
			color: #0484D7;
		}

		.partyBuildingInformation .slideTitle {
			font-size: 14px;
		}
	}

	@media (max-width: 768px) {

		.content_bg {
			width: 100%;
			margin: 0 auto;
		}

		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((768 * 0.8 - 40) * 13 / 24));
			height: calc(1px * ((768 * 0.8 - 40) * 13 / 24 * 520 / 720));

		}

		.newArea,
		.news-list {
			width: 100%;
			height: calc(1px * ((1024 * 0.8 - 40) * 13 / 24 * 520 / 720)) !important;
			padding-left: 10px;
		}

		.partyBuildingInformation .news-list .news-item {
			width: 100%;
			height: calc(1px * (((1024 * 0.8 - 40) * 13 / 24 * 520 / 720 - 18 * 3) / 4)) !important;
		}

		.partyBuildingInformation .news-list .newcontent .title {

			height: 24px;
			line-height: 24px;
			font-size: 16px;
		}

		.partyBuildingInformation .newcontent .description {

			height: 30px;
			line-height: 16px;
			font-size: 12px;
		}

		.partyBuildingInformation .news-list .day {
			height: 30px;
			line-height:30px;
			padding-top: 10px;
			font-size: 30px;
		}

		.partyBuildingLeads .news-item .date {
			color: #ffffff;
			background-color: #0484D7;
		}

		.partyBuildingLeads .news-item .newcontent .title {
			color: #0484D7;
		}

		.partyBuildingInformation .slideTitle {
			font-size: 14px;
		}

		.partyBuildingInformation .news-list .month-year {
			font-size: 12px;
		}

		.partyBuildingInformation .slideTitle {
			font-size: 12px;
			padding: 0px 26% 0px 10px;
		}
	}
	
	@media (max-width: 440px) {
	
		.content_bg {
			width: 100%;
			margin: 0 auto;
		}
	
		.partyBuildingInformation .swiper-container,
		.partyBuildingInformation .partyBuildingInformationSwiper,
		.partyBuildingInformation .swiper-slide img {
			width: calc(1px * ((768 * 0.8 - 40) * 13 / 24));
			height: calc(1px * ((768 * 0.8 - 40) * 13 / 24 * 520 / 720));
	
		}
	
		.newArea,
		.news-list {
			width: 100%;
			height:max-content !important;
			padding-left: 10px;
		}
	
		.partyBuildingInformation .news-list .news-item {
			width: 100%;
			height: 69px !important;
		}
	
		.partyBuildingInformation .news-list .newcontent .title {
	
			height: 24px;
			line-height: 24px;
			font-size: 16px;
		}
	
		.partyBuildingInformation .newcontent .description {
			 
			height: 40px;
			line-height: 22px;
			font-size: 12px;
		}
	
		.partyBuildingInformation .news-list .day {
			height: 30px;
			line-height:30px;
			padding-top: 10px;
			font-size: 30px;
		}
	
		.partyBuildingLeads .news-item .date {
			color: #ffffff;
			background-color: #0484D7;
			opacity:0.8;
		}
	
		.partyBuildingLeads .news-item .newcontent .title {
			color: #0484D7;
		}
	
		.partyBuildingInformation .slideTitle {
			font-size: 14px;
		}
	
		.partyBuildingInformation .news-list .month-year {
			font-size: 12px;
			line-height: 30px;
			height: 30px;
		}
	
		.partyBuildingInformation .slideTitle {
			font-size: 12px;
			padding: 0px 26% 0px 10px;
		}
	}
</style>